import React, { useEffect, useState } from 'react'
/* 
刷新页面后msg不变化
1. 保存msg   
  位置： sessionStorage/localStorage
  时机： msg发生变化时 =》 useEffect(() => {}, [msg])
2. 读取msg
  初始值读取
  useEffect(() => {}, [])
*/
export default function EffectTest() {
  // const [msg, setMsg] = useState(sessionStorage.getItem('msg_key') || 'atguigu')
  const [msg, setMsg] = useState('atguigu')
  const [count, setCount] = useState(0)
  console.log('EffectTest', count)

  useEffect(() => {
    // 读取sesionStorage中的msg, 并更新状态
    const msg = sessionStorage.getItem('msg_key')
    if (msg) {
      setMsg(msg)
    }
  }, [])

  /* 
  useEffect  模拟类组件的生命周期勾子
    调用1： useEffect(() => {}, [])  => didMount  => 相当于没有监视任何数据变化
    调用2： useEffect(() => {}, [xxx]) => didMount + xxx数据变化导致的didUpdate  =》 相当于监视了xxx的变化
    调用3： useEffect(() => {}) => didMount + didUpdate  => 相当于监视所有数据变化

    模拟willUnmount：
      useEffect(() => {
        return () => {   // willUnmount

        }
      }, [])

  */
  useEffect(() => {
    console.log('effect回调333')
    return () => {
      console.log('相当于willUnmount的回调')
    }
  }, [])
  

  useEffect(() => {
    console.log('effect回调2222')
  })
  

  useEffect(() => {
    console.log('effect回调111')
    // 1. 保存msg 
    sessionStorage.setItem('msg_key', msg)
  }, [msg])


  useEffect(() => { // didMount  只有初始化挂载时执行一次
    setInterval(() => {
      // console.log('定时器回调')
      // 正确写法
      // setCount(value => {  // value总内部存储的最新值
      //   const newValue = value + 2
      //   // document.title = newValue
      //   return newValue
      // })

      // 错误写法
      setCount(count + 2)
      // document.title = count + 2

    }, 1000);
  }, [])
  /* 
  第一次： EffectTest() {count=0   effect() => {定时器回调(){读取count}}}  => setCount()
  更新执行 EffectTest() {count=2}
  */

  return (
    <div>
      <p>count: {count}</p>
      <p>msg: {msg}</p>
      <button onClick={() => setCount(count + 1)}>更新count</button>
      <button onClick={() => setMsg(msg + '++')}>更新Msg</button>
    </div>
  )
}
